<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>检测图片黑色</title>
</head>

<body>
  <input type="file" id="imageInput" accept="image/*" />
  <canvas id="canvas" style="display: none;"></canvas>
  <p id="result"></p>

  <script>
    const imageInput = document.getElementById('imageInput');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const result = document.getElementById('result');

    imageInput.addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (!file) return;

      const reader = new FileReader();
      reader.onload = function (e) {
        const img = new Image();
        img.onload = function () {
          // 设置 canvas 尺寸与图片一致
          canvas.width = img.width;
          canvas.height = img.height;

          // 将图片绘制到 canvas 上
          ctx.drawImage(img, 0, 0);

          // 获取像素数据
          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
          const data = imageData.data;

          // 统计黑色像素数量
          let blackPixelCount = 0;
          const threshold = 50; // 定义黑色的阈值（RGB 值均小于该值）

          for (let i = 0; i < data.length; i += 4) {
            const r = data[i];
            const g = data[i + 1];
            const b = data[i + 2];

            // 判断是否为黑色
            if (r < threshold && g < threshold && b < threshold) {
              blackPixelCount++;
            }
          }

          // 计算黑色像素比例
          const totalPixels = canvas.width * canvas.height;
          const blackRatio = (blackPixelCount / totalPixels * 100).toFixed(2);

          // 显示结果
          result.textContent = `黑色像素占比：${blackRatio}%`;
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    });
    // From a length
    var uintc8 = new Uint8ClampedArray(2);
    uintc8[0] = 42;
    uintc8[1] = 1337;
    for (let i = 0; i < uintc8.length; i++) {
      console.log(uintc8[i])
    }

  </script>
</body>

</html>